<template>
  <div>
    <div class="change-value">
      <a href="javascript:void (0)" @click="show=true">
        <img src="@/assets/images/lang.png" alt="">
        {{$t('语言')}}
      </a>
    </div>
    <van-popup v-model="show" position="bottom" :style="{ height: '40%' }" round>
      <van-picker
          title=""
          show-toolbar
          :columns="columns"
          @confirm="onConfirm"
          @cancel="onCancel"
          :cancel-button-text="$t('取消')"
          :confirm-button-text="$t('确定')"
      />
    </van-popup>

  </div>
</template>

<script>

 import {getLanguageInfo} from "@/api/apiFox";
 import {getItem, setItem} from "@/utils/auth";

 export default {
   data(){
     return{
       active:"",
       show:false,
       columns: [],
     }
   },
   mounted() {
     this.getList()
   },
   methods: {
     getList(){
       getLanguageInfo().then(res=>{
         if (res && res.length>0){
           let array = res
           array.forEach(value=>{
             value.text = value.name
           })
           if (getItem('lang')){
             this.active = getItem('lang') || 'zh'
           }else{
             this.active = res[0].value
             setItem('lang',res[0].value)
             // this.$store.dispatch('languageSet', res[0])
             // location.reload()
           }
           this.columns = res
         }else{
           this.columns = []
         }

         console.log(res)

       }).catch(err=>{})
     },
     onConfirm(value, index) {
       this.active = value.value
       setItem('lang',value.value)
       // this.$store.dispatch('languageSet', value)
       location.reload()
       this.onCancel()
     },
     onCancel() {
       this.show=false
     },
   },
 }
</script>

<style scoped lang="scss">
.change-value{
  position: fixed;
  top: 20px;
  width: 100%;
  padding: 0 15px;
  box-sizing: border-box;
  left: 0;
  z-index: 999;
  pointer-events: auto;
  display: flex;
  justify-content: right;
  align-items: center;
  color: #666;
  font-size: 14px;
  a{
    display: flex;
    align-items: center;
    color: #666;
    img{
      height: 25px;
      margin-right: 5px;
    }
  }
}
</style>
